<script>
export default {
  name: "XiaoQuComponent",
  data() {
    return{
      input1:'',
      value1: '',
      value2: '',
      XiaoQu:{},

      dialogFormVisibleBianJi1:false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1:false,
      dialogFormVisibleGuanLian:false,
      chaXunGuanLian: '',
      dialogFormVisibleXianShi:false,
      dialogFormVisibleBianJi:false,
      guanLianArr:'',


      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        communityName:'',
        communityAddress:'',
      },
      formLabelWidth: '120px',
      xiangxidizhi: '',
      addressAll: [],   //省市区
      address: [], //你选择的地址
      communityId:'',
    }
  },
  created () {
    this.getAllProvinceAndCityList();

    //小区
    this.axios.get("/community/communityList",{
      params:{
        name:'',
        startTime:'',
        endTime:'',
        pageNum: 1,
        pageSize: 10,
        communityName:'',
      }
    }).then(res=>{
      console.log(res.data);
      this.XiaoQu = res.data.data;
    }).catch(err=>{

    })
  },
  methods:{
    //搜索
    searchxiaoqu () {
      let startTime = ''
      let endTime = ''
      if (this.value1.length > 0) {
        startTime = this.value1[0].getFullYear() + '-' + (this.value1[0].getMonth() + 1).toLocaleString('en-US', {
          minimumIntegerDigits: 2, useGrouping: false,
        }) + '-' + this.value1[0].getDate().toLocaleString('en-US', {
          minimumIntegerDigits: 2, useGrouping: false,
        }) + ' 00:00:00'

        endTime = this.value1[1].getFullYear() + '-' + (this.value1[1].getMonth() + 1).toLocaleString('en-US', {
          minimumIntegerDigits: 2, useGrouping: false,
        }) + '-' + this.value1[1].getDate().toLocaleString('en-US', {
          minimumIntegerDigits: 2, useGrouping: false,
        }) + ' 00:00:00'
      }

      this.axios.get('community/communityList', {
        params: {
          pageNum: 1,
          pageSize: 10,
          name: this.input1,
          startTime: startTime,
          endTime: endTime,
          communityName: this.input1,
        },
      }).then((res) => {
        this.XiaoQu = res.data.data
      }).catch(() => {})
    },

    //卫星坐标
    weiXing () {
      let diZhi = this.address[0] + this.address[1] + this.address[2] + this.form.region
      if (diZhi != null && this.address.length > 0) {
        this.axios.get('https://restapi.amap.com/v3/geocode/geo', {
          params: {
            key: 'b1d31c19d90f91ff9f07aab5bbd5d9d1',
            address: diZhi,
          },
        }).then((res) => {
          this.xiangxidizhi = res.data.geocodes[0].location
        })
      } else {
        alert('请先填写地址')
      }

    },

    //获取省市
    getAllProvinceAndCityList () {

      // 获取全国所有省份和城市的列表
      var that = this
      this.$http.get('https://restapi.amap.com/v3/config/district', {
        // 高德地图的API
        params: {
          key: 'b1d31c19d90f91ff9f07aab5bbd5d9d1', // 这个是申请的 Key，读者自行写入
          keywords: '中国',
          subdistrict: 3,
          extensions: 'base',
        },
      }).then((response) => {
        console.log(response.data)

        for (let i = 0; i < response.data.districts[0].districts.length; i++) {
          let provinceMap = new Map()
          provinceMap.value = response.data.districts[0].districts[i].adcode   //区域编号
          provinceMap.label = response.data.districts[0].districts[i].name     //省名称
          provinceMap.children = []
          that.addressAll.push(provinceMap)  //添加省份
          for (let j = 0; j < response.data.districts[0].districts[i].districts.length; j++) {
            let cityMap = new Map()
            cityMap.value = response.data.districts[0].districts[i].districts[j].adcode   //区域编号
            cityMap.label = response.data.districts[0].districts[i].districts[j].name     //市名称
            cityMap.children = []
            provinceMap.children.push(cityMap) //添加市
            for (let k = 0; k < response.data.districts[0].districts[i].districts[j].districts.length; k++) {
              let areaMap = new Map()
              areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode   //区域编号
              areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name     //区县名称
              cityMap.children.push(areaMap)   //添加区县
            }
          }
        }
      })
    },

    //添加小区
    addxiaoqu () {
      this.axios.post('community/communityUpdate', {
        addOrUpdateFlag: 1,
        communityAddress: this.form.region,
        communityAreaCode: '',
        communityCity: this.address[1],
        communityCoordinates: '',
        communityDistrict: this.address[2],
        communityId: '',
        communityLatitude: '',
        communityLongitude: '',
        communityName: this.form.name,
        communityProvince: this.address[0],
      }).then(() => {
        this.XiaoQu = res.data.data
      }).catch(() => {})
      alert("添加成功");
      window.location.reload();
    },

    //编辑小区
    clickBianJiXiaoQu(row){
      this.form.communityAreaCode = row.communityAreaCode;
      this.form.communityCoordinates = row.communityCoordinates;
      this.form.communityId = row.communityId;
      this.form.communityShopCount = row.communityShopCount;
      this.form.communityStatus = row.communityStatus;
      this.form.communityUserCount = row.communityUserCount;
      this.form.createTime = row.createTime;
      this.form.distance = row.distance;
      this.form.communityName = row.communityName;
      this.form.communityAddress = row.communityAddress;
      this.address = [row.communityProvince, row.communityCity, row.communityDistrict];
      this.xiangxidizhi = row.communityLatitude.toString() + ' ' + row.communityLongitude.toString();
    },
    bianJiXiaoQu(){
      this.axios.post("/community/communityUpdate", {
        communityAddress: this.form.communityAddress,
        addOrUpdateFlag: 2,
        communityAreaCode: this.form.communityAreaCode,
        communityCoordinates: this.form.communityCoordinates,
        communityId: this.form.communityId,
        communityLatitude: this.xiangxidizhi[0],
        communityLongitude: this.xiangxidizhi[1],
        communityName: this.form.communityName,
        communityShopCount: this.form.communityShopCount,
        communityStatus: this.form.communityStatus,
        communityUserCount: this.form.communityUserCount,
        createTime: this.form.createTime,
        distance: this.form.distance,
        communityProvince: this.address[0],
        communityCity: this.address[1],
        communityDistrict: this.address[2],
      }).then(() => {this.XiaoQu = res.data.data;
      }).catch(() => { });
      alert("编辑成功");
      window.location.reload();
    },

    //删除小区
    lastClick (row) {
      this.communityId =row.communityId
      this.axios.post('/community/communityRemove', {
        communityId: this.communityId,
      }).then(() => {
      }).catch(() => {})
      alert("删除成功");
      window.location.reload();
    },

    //关联小区
    guanLianXiaoQu(row) {
      //获取关联的小区列表
      this.axios.request("/associatedStores/associatedStoresList", {
        params: {
          pageNum: '',
          pageSize: '',
          shopName: '',
          communityId: row.communityId,
        }
      }).then((res) => {
        this.guanLianArr = res.data.data;
      }).catch(() => {
      })
    },





  },
}
</script>

<template>
<div class="xiaoqu">
  <div class="xiaoqu-border">
    <span>小区名称:&nbsp;&nbsp;</span>
    <el-input class="input1" v-model="input1" placeholder=""></el-input>
  </div>
  <div class="block">
    <span class="demonstration">创建时间:&nbsp;&nbsp;</span>
    <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>
    <el-button class="search" type="primary" @click="searchxiaoqu">搜索</el-button>
  </div>
<!--  弹框-->
  <div class="tankuang">
    <el-button class="add" type="text" @click="dialogFormVisible = true">新增小区</el-button>

    <el-dialog title="新增小区" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="门店名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属地区" :label-width="formLabelWidth">
          <el-cascader :options="addressAll" clearable v-model="address" :props="{value:'label'}"></el-cascader>
          <div style="margin: 10px 0;"></div>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form.region" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="门店坐标" v-model="address" :label-width="formLabelWidth">
          <el-button type="success" style="margin-bottom: 20px; margin-right: 10px" @click="weiXing">获取位置
          </el-button>
          <span>{{ xiangxidizhi }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,addxiaoqu()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

  <!-- 编辑小区 -->
  <div>
    <el-dialog title="编辑小区" :visible.sync="dialogFormVisibleBianJi1">
      <el-form :model="form">
        <el-form-item label="门店名称" :label-width="formLabelWidth">
          <el-input v-model="form.communityName" autocomplete="off" :default-value="form.communityName"></el-input>
        </el-form-item>
        <el-form-item label="所属地区" :label-width="formLabelWidth" :default-value="address">
          <el-cascader :options="addressAll" clearable v-model="address"
                       :props="{ value: 'label' }"></el-cascader>
          <div style="margin: 10px 0"></div>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form.communityAddress" autocomplete="off" :default-value="form.communityAddress"></el-input>
        </el-form-item>
        <el-form-item label="门店坐标" v-model="address" :label-width="formLabelWidth">
          <el-button type="success" style="margin-bottom: 20px; margin-right: 10px"
                     @click="weiXing">获取位置</el-button>
          <span>{{ xiangxidizhi }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleBianJi = false">取 消</el-button>
        <el-button type="primary" @click="(dialogFormVisibleBianJi1 = false),bianJiXiaoQu()">确 定</el-button>
      </div>
    </el-dialog>
  </div>


  <div class="content">
    <el-table
        :data="XiaoQu.list"
        border
        :header-cell-style="{background:'#46a6ff',textAlign:'center',color:'white'}"
        style="width: 1250px">
      <el-table-column
          fixed
          prop="communityId"
          label="ID"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="communityName"
          label="名称"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="communityAddress"
          label="位置"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="communityUserCount"
          label="用户数量"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="communityShopCount"
          label="关联门店"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="240">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="180">
        <template slot-scope="scope" >
          <el-button
              type="text"
              size="small"
              @click="dialogFormVisibleGuanLian = true,guanLianXiaoQu(scope.row)">
            查看关联门店
          </el-button>
            <el-button class="bianji" type="text" @click="(dialogFormVisibleBianJi1 = true), clickBianJiXiaoQu(scope.row)">编辑小区</el-button>

          <el-button class="drop" @click="lastClick(scope.row)" type="text" size="small" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    关联门店-->
    <el-dialog title="查看关联门店"
               :visible.sync="dialogFormVisibleGuanLian"
               width="800px"
               align="left">
      <el-form :model="form">

        <el-input v-model="chaXunGuanLian" autocomplete="off"
                  style="width: 200px;margin-right: 10px"></el-input>
        <el-button>搜索</el-button>
        <el-button
            @click="XiaoQu(scope.row),dialogFormVisibleXianShi = true,dialogFormVisibleGuanLian=false">
          添加关联门店
        </el-button>

        <!--                选择关联门店的时候打开-->
        <el-table
            :header-cell-style="{background:'#46a6ff','text-align':'center',color:'white'}"
            :data="guanLianArr.list"
            border
            style="width: 700px;margin-top: 20px">
          <el-table-column
              prop="shopCommunitySort"
              label="序号"
              align="center"
              width="70">
          </el-table-column>
          <el-table-column
              prop="shopName"
              label="名称"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="shopId"
              label="ID"
              align="center"
              width="70">
          </el-table-column>
          <el-table-column
              prop="shopSort"
              label="排序"
              align="center"
              width="60">
          </el-table-column>
          <el-table-column
              prop="shopAddress"
              label="地址"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="shopOrderCount"
              label="订单数量"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
              width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleBianJi = false, baoCun()">保 存</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  <div class="fenye">
    <el-pagination
        :total="1"
        layout="prev, pager, next">
    </el-pagination>
  </div>
</div>
</template>

<style scoped>
.xiaoqu{
  height: 800px;
}
.xiaoqu-border {
  display: inline-block;
}

.input1 {
  width: 200px;
  margin-top: 25px;
}
.block{
  display: inline-block;
  margin-left: 40px;
}
.search{
  margin-left: 15px;
}

.tankuang .add {
  width: 100px;
  height: 40px;
  background-color: #1890FF;
  color: white;
  margin: 15px 0;
}

.bianji{
  font-size: 12px;
}
.drop{
  margin-left: 60px;
}
.fenye{
  padding-bottom: 30px;
}
</style>